<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { defaultFormData, formDataLabel } from '../index'
// ------------------use------------------
// #region
defineProps<{
  title: string
}>()
const emits = defineEmits<{
  'save-success': []
}>()
const formData = defineModel('data', {
  default: () => defaultFormData,
})
const [isDrawer, setIsDrawer] = useState<boolean>(false)
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const formRef = ref<FormInstance | null>(null)
const rules = {
  enterpriseName: [{ required: true, message: '必填项' }],
  socialCreditCode: [{ required: true, message: '必填项' }],
}
// #endregion
// ------------------reactive------
// #region
// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region

// #endregion
// ------------------内置方法---------------------
// #region
// #endregion
// ------------------方法---------------------
// #region
async function open() {
  setIsDrawer(true)
  await nextTick()
  formRef.value?.resetFields()
}
function close() {
  setIsDrawer(false)
}
async function clickSave() {
  await formRef.value?.validate()
  emits('save-success')
}
// #endregion
defineExpose({
  open,
  close,
})
</script>

<template>
  <ElDrawer v-model="isDrawer" :size="600" :title="title">
    <BScrollbar>
      <ElForm
        ref="formRef"
        label-width="120px"
        label-position="right"
        :model="formData"
        scroll-to-error inline
        :rules="rules"
        class="width-fill flex flex-wrap justify-between"
      >
        <template v-for="(_, key) in formData" :key="key">
          <ElFormItem
            v-if="!['id', 'tenantId'].includes(key)"
            :label="String(formDataLabel[key])"
            :prop="key"
            class="width-fill"
          >
            <ElSelect
              v-if="
                [
                  'transferEnterprise',
                  'centralEnterprises',
                  'managementCertification',
                ].includes(key)
              "
              v-model="formData[key]"
              class="width-fill"
            >
              <ElOption label="是" value="1" />
              <ElOption label="否" value="0" />
            </ElSelect>
            <ElInput v-else v-model="formData[key]" />
            <!-- <el-input-number
            v-else
            v-model.number="formData[key]"
            :min="0"
            controls-position="right"
            class="width-fill"
          /> -->
          </ElFormItem>
        </template>
      </ElForm>
    </BScrollbar>
    <template #footer>
      <div style="flex: auto">
        <ElButton @click="close">
          取消
        </ElButton>
        <ElButton type="primary" @click="clickSave">
          保存
        </ElButton>
      </div>
    </template>
  </ElDrawer>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
